<div {{{class 'section local-storage'}}}>
  <h2 {{{class 'title'}}}>
    Local Storage
    <div {{{class 'btn refresh-local-storage'}}}>
      <span {{{class 'icon-refresh'}}}></span>
    </div>
    <div {{{class 'btn clear-storage'}}} data-type="local">
      <span {{{class 'icon-clear'}}}></span>
    </div>
    <div {{{class 'btn search'}}} data-type="local">
      <span {{{class 'icon-search'}}}></span>
    </div>
    {{#if localStoreSearchKeyword}}<div {{{class 'btn search-keyword'}}}>{{localStoreSearchKeyword}}</div>{{/if}}
  </h2>
  <div {{{class 'content'}}}>
    <table>
      <tbody>
        {{#if localStoreData}}
          {{#each localStoreData}}
            <tr>
              <td {{{class 'key'}}}>{{key}}</td>
              <td {{{class 'storage-val'}}} data-key="{{key}}" data-type="local">{{val}}</td>
              <td {{{class 'control'}}}>
                <span {{{class 'icon-delete delete-storage'}}} data-key="{{key}}" data-type="local"></span>
              </td>
            </tr>
          {{/each}}
        {{else}}
          <tr>
            <td>Empty</td>
          </tr>
        {{/if}}
      </tbody>
    </table>
  </div>
</div>
<div {{{class 'section session-storage'}}}>
  <h2 {{{class 'title'}}}>
    Session Storage
    <div {{{class 'btn refresh-session-storage'}}}>
      <span {{{class 'icon-refresh'}}}></span>
    </div>
    <div {{{class 'btn clear-storage'}}} data-type="session">
      <span {{{class 'icon-clear'}}}></span>
    </div>
    <div {{{class 'btn search'}}} data-type="session">
      <span {{{class 'icon-search'}}}></span>
    </div>
    {{#if sessionStoreSearchKeyword}}<div {{{class 'btn search-keyword'}}}>{{sessionStoreSearchKeyword}}</div>{{/if}}
  </h2>
  <div {{{class 'content'}}}>
    <table>
      <tbody>
      {{#if sessionStoreData}}
        {{#each sessionStoreData}}
          <tr>
            <td {{{class 'key'}}}>{{key}}</td>
            <td {{{class 'storage-val'}}} data-key="{{key}}" data-type="session">{{val}}</td>
            <td {{{class 'control'}}}>
              <span {{{class 'icon-delete delete-storage'}}} data-key="{{key}}" data-type="session"></span>
            </td>
          </tr>
        {{/each}}
      {{else}}
        <tr>
          <td>Empty</td>
        </tr>
      {{/if}}
      </tbody>
    </table>
  </div>
</div>
<div {{{class (concat 'section cookie ' cookieState)}}}>
  <h2 {{{class 'title'}}}>
    Cookie
    <div {{{class 'btn refresh-cookie'}}}>
      <span {{{class 'icon-refresh'}}}></span>
    </div>
    <div {{{class 'btn clear-cookie'}}}>
      <span {{{class 'icon-clear'}}}></span>
    </div>
    <div {{{class 'btn search'}}} data-type="cookie">
      <span {{{class 'icon-search'}}}></span>
    </div>
    {{#if cookieSearchKeyword}}<div {{{class 'btn search-keyword'}}}>{{cookieSearchKeyword}}</div>{{/if}}
  </h2>
  <div {{{class 'content'}}}>
    <table>
      <tbody>
        {{#if cookieData}}
          {{#each cookieData}}
            <tr>
              <td {{{class 'key'}}}>{{key}}</td>
              <td>{{val}}</td>
              <td {{{class 'control'}}}>
                <span {{{class 'icon-delete delete-cookie'}}} data-key="{{key}}"></span>
              </td>
            </tr>
          {{/each}}
        {{else}}
          <tr>
            <td>Empty</td>
          </tr>
        {{/if}}
      </tbody>
    </table>
  </div>
</div>
<div {{{class (concat 'section script ' scriptState)}}}>
  <h2 {{{class 'title'}}}>
    Script
    <div {{{class 'btn refresh-script'}}}>
      <span {{{class 'icon-refresh'}}}></span>
    </div>
  </h2>
  <ul {{{class 'link-list'}}}>
    {{#if scriptData}}
      {{#each scriptData}}
        <li>
          <a href="{{this}}" target="_blank" {{{class 'js-link'}}}>{{this}}</a>
        </li>
      {{/each}}
    {{else}}
      <li>Empty</li>
    {{/if}}
  </ul>
</div>
<div {{{class (concat 'section stylesheet ' stylesheetState)}}}>
  <h2 {{{class 'title'}}}>
    Stylesheet
    <div {{{class 'btn refresh-stylesheet'}}}>
      <span {{{class 'icon-refresh'}}}></span>
    </div>
  </h2>
  <ul {{{class 'link-list'}}}>
    {{#if stylesheetData}}
      {{#each stylesheetData}}
        <li>
          <a href="{{this}}" target="_blank" {{{class 'css-link'}}}>{{this}}</a>
        </li>
      {{/each}}
    {{else}}
      <li>Empty</li>
    {{/if}}
  </ul>
</div>
<div {{{class 'section iframe'}}}>
  <h2 {{{class 'title'}}}>
    Iframe
    <div {{{class 'btn refresh-iframe'}}}>
      <span {{{class 'icon-refresh'}}}></span>
    </div>
  </h2>
  <ul {{{class 'link-list'}}}>
    {{#if iframeData}}
      {{#each iframeData}}
        <li>
          <a href="{{this}}" target="_blank" {{{class 'iframe-link'}}}>{{this}}</a>
        </li>
      {{/each}}
    {{else}}
      <li>Empty</li>
    {{/if}}
  </ul>
</div>
<div {{{class 'section image'}}}>
  <h2 {{{class (concat 'title ' imageState)}}}>
    Image
    <div {{{class 'btn refresh-image'}}}>
      <span {{{class 'icon-refresh'}}}></span>
    </div>
  </h2>
  <ul {{{class 'image-list'}}}>
    {{#if imageData}}
      {{#each imageData}}
        <li {{{class 'image'}}}>
          <img src="{{this}}" data-exclude="true" {{{class 'img-link'}}}/>
        </li>
      {{/each}}
    {{else}}
      <li>Empty</li>
    {{/if}}
  </ul>
</div>
